<script setup lang="ts">
definePageMeta({
  title:'添加用户',
  layout:'admin',
})
import type {FormInstance} from "element-plus";
const formRef=ref<FormInstance>();
const formRules=reactive({
  id:[
    {required:true,message:'请输入用户ID',trigger:'blur'},
    {pattern:/^\d{1,10}$/,message:'用户ID格式不正确',trigger:'blur'},
    {validator:(rule:any,value:any,callback:Function)=>{
        if(value<1){
          callback(new Error('用户ID不能小于1'));
        }else if(value>1000){
          callback(new Error('用户ID不能大于1000'));
        }else{
          callback();
        }
      },trigger:'blur'
    }
  ],
  phone:[{required:true,message:'请输入手机号',trigger:'blur'},
    {pattern:/^1[3-9]\d{9}$/,message:'手机号格式不正确',trigger:'blur'}
  ],
  email:[{required:true,message:'请输入邮箱',trigger:'blur'},
    {pattern:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,message:'邮箱格式不正确',trigger:'blur'}
  ],
  password:[{required:true,message:'请输入密码',trigger:'blur'}
  ],
  password1:[{required:true,message:'请输入确认密码',trigger:'blur'},
    {validator:(rule:any,value:any,callback:Function)=>{
        if(value!==form.password){
          callback(new Error('两次输入密码不一致'));
        }else{
          callback();
        }
      },trigger:'blur'
    }
  ],
  qq:[{required:true,message:'请输入QQ',trigger:'blur'},
    {pattern:/^[1-9][0-9]{4,10}$/,message:'QQ格式不正确',trigger:'blur'}
  ],
  // money:[{required:true,message:'请输入金额',trigger:'blur'},
  //   {pattern:/^\d+(\.\d{1,2})?$/,message:'金额格式不正确',trigger:'blur'}
  // ],
})
const form=reactive({
  id:'',//1
  phone:'',//18024168277
  email:'',//1122@qq.com
  password:'',//1231231
  password1:'',//
  qq:'',//1195024248
  // money:'',//11
})
const submit= ()=>{
  if(!formRef.value) return
 formRef.value?.validate(async (isValid,fileVa)=>{
   if(isValid){
     const {code,data,message}=await usePost('/backend/user/add',form)
     if(code===200){
       ElMessage.success(form.id?'编辑成功':'创建成功')
       navigateTo('/backend/user')
     }else{
       ElMessage.error(message)
     }
   }else{
      showFieldsError(fileVa)
   }

  })

}
</script>

<template>
<el-card>
  <el-form :model="form" :rules="formRules" ref="formRef" label-width="120px" label-suffix="：" class="w-1/3 mx-auto">
    <el-form-item label="id" prop="id">
      <el-input v-model.number="form.id" placeholder="请输入用户ID" :min="1" :max="1000"></el-input>
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="form.phone" placeholder="请输入手机号" minlength="11" maxlength="11"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="password1">
      <el-input v-model="form.password1" type="password" placeholder="请输入确认密码"></el-input>
    </el-form-item>
    <el-form-item label="QQ" prop="qq">
      <el-input v-model="form.qq" placeholder="请输入QQ"></el-input>
    </el-form-item>
<!--    <el-form-item label="金额" prop="money">-->
<!--      <el-input v-model="form.money" placeholder="请输入金额"></el-input>-->
<!--    </el-form-item>-->
    <el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
    </el-form-item>
  </el-form>
</el-card>
</template>

<style scoped lang="scss">

</style>